<template>
  <el-dialog
    title="项目权限配置"
    :visible.sync="dialogVisible"
    width="813px"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="content">
      <div class="l-box">
        <div class="memberList">
          <div :class="item.check ? 'item check' : 'item'" v-for="(item, index) in memberList" :key="index" @click="handleMember(item)">
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="r-box">
        <!--    权限1    -->
        <el-checkbox
          v-model="auth1"
          @change="(val) => val ? this.auth1List.forEach(i => this.auth1Children.push(i.id)) : this.auth1Children = []">
          全选</el-checkbox>
        <el-checkbox-group style="margin: 10px 0 30px 0" v-model="auth1Children" @change="(val) => this.auth1 = val.length === this.auth1List.length">
          <el-checkbox :label="item.id" v-for="(item, index) in auth1List" :key="index">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {roleList, roleMenuTreeselect} from "@/api/projectManage/membership";

export default {
  name: "projectAuthority",
  data() {
    return {
      dialogVisible: false,
      isMember: {},
      memberList: [],
      auth1: false,
      auth1List: [],
      auth1Children: []
    }
  },
  methods: {
    getRoleList() {
      this.memberList = []
      roleList().then(res => {
        if (res.rows.length) {
          res.rows.forEach((i, z) => {
            if (i) {
              this.memberList.push(
                {
                  id: i.roleId,
                  label: i.roleName,
                  check: z === 0
                },
              )
            }
          })
        }
        this.isMember = this.memberList[0]
        this.getRoleTree()
      })
    },
    getRoleTree() {
      roleMenuTreeselect(this.isMember.id).then(res => {

      })
    },
    open() {
      this.dialogVisible = true
      this.getRoleList()
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 选择成员分类
    handleMember(item) {
      this.isMember = item
      this.memberList.forEach(k => {
        k.label === item.label ? k.check = true : k.check = false
      })
      this.getRoleTree()
    },
    // 完成
    done() {
      const checkList = [...this.auth1Children, ...this.auth2Children, ...this.auth3Children]
      console.log(checkList)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.content {
  padding: 10px 0 0 10px;
  display: flex;
  .l-box {
    width: 28%;
    .memberList {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 150px;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: normal;
      cursor: pointer;
      .item {
        width: 100%;
        height: 34px;
        line-height: 34px;
        padding-left: 15px;
        color: #333333;
        margin-bottom: 20px;
      }
      .check {
        border-radius: 4px;
        color: #C50405;
        background: rgba(255, 213, 210, 0.5);
      }
    }
  }
  .r-box {
    width: 72%;
  }
}
</style>
